<template>
  <div class="app-container">
    <el-form ref="form" :model="testingEnvironmentAdd" :rules="rules" label-width="120px">
      <el-form-item label="环境名称:" prop="apiname">
        <el-input v-model="testingEnvironmentAdd.apiname" />
      </el-form-item>
      <el-form-item label="ip地址:" prop="ip">
        <el-input v-model="testingEnvironmentAdd.ip" />
      </el-form-item>
      <el-form-item label="端口:" prop="port">
        <el-input v-model="testingEnvironmentAdd.port" />
      </el-form-item>
      <el-form-item label="协议类型:" prop="agreement">
        <el-radio-group v-model="testingEnvironmentAdd.agreement">
          <el-radio label="http" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="状态:" prop="state">
        <el-select v-model="testingEnvironmentAdd.state" placeholder="请选择活动区域" >
            <el-option label="启用" value="0"></el-option>
            <el-option label="不启用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注:" placeholder="请输入备注">
          <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 50}"
              placeholder="请输入内容"
              v-model="testingEnvironmentAdd.remark">
          </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">{{messageView.sumit}}</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {addTestingEnvironment,getOneEnvironment,updateTestingEnvironment} from '@/api/testingEnvironment'
export default {
  name:"testingEnvironmentFrom",
  data() {
    return {
      isAdd:true,
      isAddMessage:{sumit:"新增"},
      noAddMessage:{sumit:"编辑"},
      messageView:{},
      datasourceId:"",
      testingEnvironmentAdd:{},
      apiname:"",
      ip:"",
      port:"",
      agreement:"",
      state:"",
      rules:{
        apiname:[ { required: true, message: '请输入环境名称', trigger: 'blur' }],
        ip:[ { required: true, message: '请输入IP', trigger: 'blur' }],
        agreement:[ { required: true, message: '请选择协议类型', trigger: 'change' }],
        state:[ { required: true, message: '请选择状态', trigger: 'change' }]
      },
    }
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate((valid) => {
          if (valid) {
            if(this.isAdd){
              addTestingEnvironment(this.testingEnvironmentAdd).then(resp=>{
                if(resp.data==true){
                  this.$message({
                            message: resp.msg,
                            type: 'success'
                          });
                }
              });
            }else{
              this.updatePost()
            }
            this.testingEnvironmentAdd={};
            this.$router.push('/environment/testingEnvironment');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    onCancel() {
      this.testingEnvironmentAdd={};
      this.$router.push('/environment/testingEnvironment');
    },
    update(datasourceId){
          this.testingEnvironmentAdd={};
          getOneEnvironment(datasourceId).then(resp=>{
              this.testingEnvironmentAdd=resp.data;
              if(this.testingEnvironmentAdd.state==0){
                this.testingEnvironmentAdd.state="启用"
              }else{
                this.testingEnvironmentAdd.state="不启用"
              }
          });
      },
    updatePost(){
          if(this.testingEnvironmentAdd.state=="启用"){
            this.testingEnvironmentAdd.state=0
          }
          if(this.testingEnvironmentAdd.state=="不启用"){
            this.testingEnvironmentAdd.state=1
          }
          updateTestingEnvironment(this.testingEnvironmentAdd).then(resp=>{
              this.$message({
                        message: resp.msg,
                        type: 'success'
                      });
              this.$router.push('/environment/testingEnvironment');        
          })
    },      
  },
  created() {
      this.$router.onReady(() => {
        this.isAdd=this.$route.query.isAdd
        this.datasourceId=this.$route.query.datasourceId
      })
      if(this.isAdd){
        this.messageView=this.isAddMessage;
      }else{
        this.messageView=this.noAddMessage;
        this.update(this.datasourceId);
      }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

